<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文章阅读</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Microsoft YaHei", sans-serif;
        }

        body {
            background-color: #f5f7fa;
            color: #333;
            line-height: 1.6;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
        }

        header {
            background-color: #4a6fa5;
            color: white;
            padding: 15px 20px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            position: relative;
        }

        .header-title {
            font-size: 1.5rem;
            font-weight: bold;
        }

        /* 目录控制按钮 */
        .toc-toggle {
            display: none;
            position: absolute;
            right: 20px;
            top: 50%;
            transform: translateY(-50%);
            background: none;
            border: none;
            color: white;
            font-size: 1.2rem;
            cursor: pointer;
            z-index: 10;
        }

        .main-content {
            display: flex;
            flex: 1;
            overflow: hidden;
        }

        /* 目录样式 */
        .table-of-contents {
            width: 280px;
            background-color: white;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
            padding: 20px;
            overflow-y: auto;
            position: sticky;
            top: 55px;
            height: calc(100vh - 55px);
            transition: all 0.3s ease;
        }

        /* 隐藏目录时的样式 */
        .table-of-contents.hidden {
            width: 0;
            padding: 0;
            overflow: hidden;
        }

        .toc-title {
            font-size: 1.2rem;
            font-weight: bold;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 2px solid #eee;
        }

        .toc-list {
            list-style: none;
        }

        .toc-item {
            margin-bottom: 10px;
        }

        .toc-link {
            color: #333;
            text-decoration: none;
            display: block;
            padding: 5px 8px;
            border-radius: 4px;
            transition: background-color 0.2s;
        }

        .toc-link:hover {
            background-color: #f0f5ff;
        }

        .toc-link.active {
            background-color: #e1edff;
            color: #4a6fa5;
            font-weight: 500;
        }

        /* 文章内容样式 */
        .article-content {
            flex: 1;
            padding: 30px;
            background-color: white;
            transition: padding 0.3s ease;
        }

        /* 目录隐藏时文章内容的样式 */
        .article-content.toc-hidden {
            padding-left: 20px;
        }

        .article-title {
            font-size: 2rem;
            font-weight: bold;
            margin-bottom: 20px;
            color: #2c3e50;
        }

        .article-meta {
            color: #7f8c8d;
            margin-bottom: 25px;
            font-size: 0.9rem;
        }

        .article-section {
            margin-bottom: 40px;
            padding-bottom: 20px;
            border-bottom: 1px solid #eee;
        }

        .section-title {
            font-size: 1.5rem;
            color: #4a6fa5;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 2px solid #e1edff;
        }

        p {
            margin-bottom: 15px;
            text-align: justify;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .main-content {
                flex-direction: column;
            }

            .table-of-contents {
                width: 100%;
                position: static;
                height: auto;
                order: -1;
            }

            .article-content {
                padding: 20px;
            }

            .article-title {
                font-size: 1.6rem;
            }

            .section-title {
                font-size: 1.3rem;
            }

            /* 移动端显示目录控制按钮 */
            .toc-toggle {
                display: block;
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <header>
            <div class="header-title">天眼阅读平台</div>
            <button class="toc-toggle" id="tocToggle">目录</button>
        </header>

        <div class="main-content">
            <!-- 目录区域 -->
            <aside class="table-of-contents" id="tableOfContents">
                <h2 class="toc-title">文章目录</h2>
                <ul class="toc-list">
                    <li class="toc-item"><a href="#intro" class="toc-link">光衰片使用方法</a></li>
                    <!-- <li class="toc-item"><a href="#history" class="toc-link">历史背景</a></li>
                    <li class="toc-item"><a href="#development" class="toc-link">发展历程</a></li>
                    <li class="toc-item"><a href="#application" class="toc-link">应用领域</a></li>
                    <li class="toc-item"><a href="#future" class="toc-link">未来展望</a></li> -->
                </ul>
            </aside>

            <!-- 文章内容区域 -->
            <main class="article-content" id="articleContent">
                <h1 class="article-title">计量笔记</h1>
                <div class="article-meta">发布时间：2025年6月4日 | 作者：天眼观察员</div>

                <section id="intro" class="article-section">
                    <h2 class="section-title">光衰片使用方法</h2>
                    <p>日光衰正常使用（不存在碎片换片等情况）情况下：</p>
                    <p> 控制目标：①每天测试2次，一天的衰减0.005%左右，控制在0.002%~0.01%；
                        操作要求：②允许有正常的测试波动（当班比前1个班高不得超过0.003%），当前1个班比前2个班测试数据高时，当班测试需将比前2个班测试数据低0.002%-0.008%；
                        ③不允许当班较前1个班测试低超过0.01%；
                        ④一周效率衰减需要在0.03%~0.04%，往中心0.035%控制；
                    </p>
                    <p> 周光衰正常使用（不存在碎片换片等情况）情况下：</p>
                    <p> 控制目标：①一周测1次，衰减0.004%左右，控制在0.002%~0.006%；
                        ②一周内存在多次使用，每次使用效率衰减需要在0.003%左右，控制在0.001%~0.006%；
                        操作要求：③允许有正常的测试波动（当次比前1个次高不得超过0.003%），当前1个次比前2个次测试数据高时，当次测试需将比前2个次测试数据低0.002%-0.008%；
                        ④不允许当次较前1个次测试低超过0.01%；
                        ⑤一个月效率衰减需要在0.015%~0.025%，往中心0.02%控制；
                    </p>
                    <p> 月光衰正常使用（不存在碎片换片等情况）情况下：</p>
                    <p> 控制目标：①一月测1次，衰减0.006%左右，控制在0.003%~0.09%；
                        ②一月内存在多次使用，每次使用效率衰减需要在0.003%左右，控制在0.001%~0.006%；
                        操作要求：③允许有正常的测试波动（当次比前1个次高不得超过0.003%），当前1个次比前2个次测试数据高时，当次测试需将比前2个次测试数据低0.005%-0.01%；
                        ④不允许当次较前1个次测试低超过0.01%；
                        ⑤半年（6个月）效率衰减需要在0.025%~0.045%，往中心0.035%控制；

                        以上关于标片标准控制要求是为了统一大家的手法，S7&S9两个车间同步执行！</p>
                </section>

                <!-- <section id="history" class="article-section">
                    <h2 class="section-title">历史背景</h2>
                    <p>人类文明的发展历程，本质上是一部科技进步的历史。在农业文明时期，青铜器和铁器的出现使人类得以大规模开发土地，农业生产效率大幅提升，从而孕育了古代文明古国。</p>
                    <p>18世纪的工业革命是科技推动文明进步的重要里程碑。蒸汽机的发明和广泛应用，彻底改变了手工劳动的生产模式，开启了机器大工业时代，推动人类社会从农业文明向工业文明转型。</p>
                </section>
                
                <section id="development" class="article-section">
                    <h2 class="section-title">发展历程</h2>
                    <p>20世纪以来，科技发展进入加速阶段。电力的普及、内燃机的改进、信息技术的萌芽，使得工业生产和社会生活发生了翻天覆地的变化。第二次世界大战后，计算机技术的诞生标志着信息时代的到来。</p>
                    <p>近几十年来，互联网的普及和移动通讯技术的发展，将人类带入了互联互通的数字化时代。大数据、云计算、人工智能等新兴技术的兴起，正在以前所未有的速度和深度改变着人类的认知方式、交流模式和生活习惯。</p>
                </section>
                
                <section id="application" class="article-section">
                    <h2 class="section-title">应用领域</h2>
                    <p>现代科技的应用已渗透到社会的各个领域。在医疗健康领域，基因编辑技术、精准医疗和人工智能诊断系统的发展，极大地提高了疾病预防和治疗水平，延长了人类寿命。</p>
                    <p>在交通领域，新能源汽车、自动驾驶技术和高速轨道交通的发展，正在重塑城市交通格局，提高出行效率并减少环境污染。航空航天技术的进步则使人类探索宇宙的梦想不断变为现实。</p>
                    <p>在环境保护方面，清洁能源技术的开发和应用，如太阳能、风能和水能等，为解决全球气候变化问题提供了重要途径。</p>
                </section>
                
                <section id="future" class="article-section">
                    <h2 class="section-title">未来展望</h2>
                    <p>展望未来，科技发展将继续深刻影响人类文明。人工智能的进一步发展可能在更多领域替代人类劳动，同时也会创造新的就业机会和产业形态。生物技术的突破可能实现人类对生命奥秘的更深入理解，甚至改变人类自身的生理特征。</p>
                    <p>量子计算、物联网和5G/6G通信技术的发展，将进一步提升信息处理和传输能力，推动智能社会的全面到来。太空探索和殖民的尝试，可能为人类文明的延续和发展开辟新的空间。</p>
                    <p>然而，科技发展也带来了一系列挑战，如伦理问题、隐私保护、就业结构变化等。如何在科技进步与人文关怀之间寻求平衡，成为人类社会面临的重要课题。</p>
                </section> -->
            </main>
        </div>
    </div>

    <script>
        // 目录导航交互
        document.addEventListener('DOMContentLoaded', function () {
            const sections = document.querySelectorAll('.article-section');
            const tocLinks = document.querySelectorAll('.toc-link');
            const tocToggle = document.getElementById('tocToggle');
            const tableOfContents = document.getElementById('tableOfContents');
            const articleContent = document.getElementById('articleContent');
            let isTocHidden = false;

            // 监听滚动事件
            window.addEventListener('scroll', function () {
                let current = '';

                sections.forEach(section => {
                    const sectionTop = section.offsetTop;
                    const sectionHeight = section.clientHeight;
                    if (pageYOffset >= (sectionTop - 200)) {
                        current = section.getAttribute('id');
                    }
                });

                tocLinks.forEach(link => {
                    link.classList.remove('active');
                    if (link.getAttribute('href') === `#${current}`) {
                        link.classList.add('active');
                    }
                });
            });

            // 目录点击跳转
            tocLinks.forEach(link => {
                link.addEventListener('click', function (e) {
                    e.preventDefault();
                    const targetId = this.getAttribute('href');
                    const targetSection = document.querySelector(targetId);

                    window.scrollTo({
                        top: targetSection.offsetTop - 100,
                        behavior: 'smooth'
                    });
                });
            });

            // 目录显示/隐藏功能
            tocToggle.addEventListener('click', function () {
                isTocHidden = !isTocHidden;

                if (isTocHidden) {
                    tableOfContents.classList.add('hidden');
                    articleContent.classList.add('toc-hidden');
                    this.textContent = '显示目录';
                } else {
                    tableOfContents.classList.remove('hidden');
                    articleContent.classList.remove('toc-hidden');
                    this.textContent = '隐藏目录';
                }
            });

            // 初始化按钮文本
            tocToggle.textContent = '隐藏目录';
        });
    </script>
</body>

</html>